/*
 * @Author: tomystery 
 * @Date: 2018-05-31 16:51:14 
 * @Last Modified by: t
 * @Last Modified time: 2018-07-15 17:52:16
 */
import React from 'react';
import { Link } from 'react-router-dom';

import PageTitle from 'component/page-title/index.jsx';
import Pagination from 'util/pagination/index.jsx';

import MUtil from 'util/mm.jsx';
import Product from 'service/product-service.jsx';
import ListSearch from './index-list-search.jsx'
import './index.scss'


const _mm = new MUtil();
const _product = new Product();
class ProductList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            pageNum: 1,
            listType:'list',
            firstLoading: true
        }
    }
    componentDidMount() {
        this.loadProductList()
    }
    //加载商品列表
    loadProductList() {
        let listParam={};
        listParam.listType=this.state.listType;
        listParam.pageNum=this.state.pageNum;

        //如果是搜索的话需要传入搜索类型和搜索关键字
        if(this.state.listType==='search'){
            listParam.searchType=this.state.searchType;
            listParam.keyword=this.state.searchKeyword;

        }
        //请求接口
        _product.getProductList(listParam).then(res => {
            this.setState(res, () => {
                this.setState({
                    list:res.list
                })
            })
        }, errMsg => {
            _mm.errTips(errMsg);
        });
    }
    changePageNum(pageNum) {
        this.setState({ pageNum: pageNum }, () => {
            this.loadProductList();
        })

    }
    //调用接口修改上下架的状态
    setProductStatus(e, productId, currentStatus) {
        let message = currentStatus == 1 ? "你确定要下架商品？" : "你确定要上架商品？"
        let r = window.confirm(message)
        if (r == true) {
            let newState = currentStatus === 1 ? 2 : 1
            let formData = {
                productId: productId,
                status: newState
            }
            _product.setSaleStatus(formData).then(res => {
                _mm.successTips('修改状态成功')
                this.loadProductList()
            }, errMsg => {
                _mm.errTips('修改状态失败')
            })
        }
    }
    onSearch(searchType,searchKeyword){
        let listType=searchKeyword==='' ? 'list':'search'
        this.setState({
            listType:listType,
            pageNum:1,
            searchType:searchType,
            searchKeyword:searchKeyword
        },()=>{
            this.loadProductList();
        })
       
    }

    render() {
        let tableList = this.state.list.map((product, index) => {
            return <tr key={index}>
                <td>{product.id}</td>
                <td>
                    <p>{product.name}</p>
                    <p>{product.subtitle}</p>
                </td>
                <td>¥{product.price}</td>
                <td>
                    <span>{product.status == 1 ? "在售" : "已下架"}</span>
                    <button className='btn-xs btn-warning' onClick={(e) => { this.setProductStatus(e, product.id, product.status) }}>{product.status == 1 ? "下架" : "上架"}</button>
                </td>
                <td className='clear-fix'>
                    <Link className='product-detail' to={`/product/detail/${product.id}`}>查看详情</Link>
                    <Link className='product-edit' to={`/product/save/${product.id}`}>编辑</Link>
                </td>
            </tr>
        })
        var tableBody = this.state.list.length > 0 ? tableList : <tr colSpan="5" className='text-center'><td>{this.state.firstLoading ? "正在加载数据..." : "没有找到相应的结果！！"}</td></tr>
        return (
            <div id='page-wrapper'>

                <div className='row'>
                    <div className='col-md-12'>
                        <PageTitle title='商品管理列表' />
                        <Link to='/product/save' className='product-save'><button className='btn-primary'>添加商品</button></Link>
                    </div>
                </div>
                <ListSearch onSearch={(searchType,searchKeyword)=>this.onSearch(searchType,searchKeyword)}/>
                <div className='row'>
                    <div className='col-md-12'>
                        <table className='table table-striped table-bordered'>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>信息</th>
                                    <th>价格</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {tableBody}

                            </tbody>
                        </table>
                        <Pagination current={this.state.pageNum} total={this.state.total} onChange={(pageNum) => this.changePageNum(pageNum)} />
                    </div>
                </div>


            </div>
        )
    }
}

export default ProductList